<template>
  <div class="Activity">
    <div class="Activity-head">
      <img src="/img/activity_banner.jpg" />
    </div>
    <div class="Activity-img">
      <imgtitle>
        <img src="/img/activity_title.jpg" />
      </imgtitle>
    </div>
    <div class="Activity-content">
      <ul class="Activity-content-ul">
        <li class="Activity-content-li" v-for="(item, index) in 6" :key="index">
          <div class="Activity-content-li-img">
            <img src="/img/20190813105052511.jpg" />
            <img src="/img/a-pic-cover.png" class="Activity-content-li-img-bg" />
          </div>
          <div class="Activity-content-li-txt">
            <h3>
              <span>CONTENT:</span>
              <em>TIME:2019.09.01</em>
            </h3>
            <h2>TIME:2019.08.13</h2>
            <p>ONLY TRAVEL PHOTO</p>
            <a>NOW BROWSE!</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import imgtitle from "../conn/imgtitle";
export default {
  data() {
    return {};
  },
  components: {
    imgtitle
  }
};
</script>
<style lang="scss">
.Activity {
  .Activity-img {
    margin: 80px auto;
  }
  .Activity-content {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    .Activity-content-ul {
      width: 1300px;
      .Activity-content-li {
        overflow: hidden;
        position: relative;
        margin-bottom: 20px;
        &:hover .Activity-content-li-img-bg {
          transform: translateY(552px);
        }
        &:hover {
          .Activity-content-li-txt {
            h3 {
              color: #efebe4;
            }
            h2 {
              color: #efebe4;
            }
            p {
              color: #efebe4;
            }
            a {
              background-color: #efebe4;
            }
          }
        }
        .Activity-content-li-img {
          font-size: 0px;
          width: 100%;
        }
        .Activity-content-li-img-bg {
          position: absolute;
          top: -552px;
          width: 100%;
          left: 0px;
          transition: all 0.5s;
        }
        .Activity-content-li-txt {
          width: 100%;
          padding-top: 30px;
          h3 {
            font-size: 14px;
            font-weight: normal;
            display: flex;
            justify-content: space-between;
          }
          h2 {
            text-decoration: none;
            color: #101010;
            font-size: 22px;
            padding: 10px 0;
            width: 100%;
            border-bottom: solid 1px #efebe4;
            margin-bottom: 10px;
          }
          p {
            font-size: 15px;
          }
          a {
            float: right;
            font-family: "DINCond-Bold";
            font-size: 16px;
            width: 95px;
            height: 24px;
            display: block;
            line-height: 24px;
            background: #ff283c;
            color: #fff;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>